<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 100%;
            height: 600px;
            background-color: rgb(197, 193, 193);
        }

        .center {
            width: 90%;
            height: 100%;
            margin: 0 auto;
            /* background-color: aqua; */
        }

        .center .furniture {
            background-color: orange;
            width: 60%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            float: left;
        }

        .center .furniture .furniture1 {
            background-color: yellow;
            width: 23%;
            height: 49%;
        }

        .center .furniture .furniture1 img {
            width: 100%;
            height: 200px;
        }

        .center .furniture .furniture1 p {
            margin-left: 10px;

        }

        .center .furniture .furniture1 button {
            width: 120px;
            margin-left: 10px;
            text-align: center;
            background-color: red;
            color: white;
            border: none;
        }

        .center .ShoppingCart {
            box-sizing: border-box;
            width: 40%;
            height: 100%;
            float: left;
            border: 1px solid gray;
            overflow: auto;
            /* overflow: auto; */
            /* position: relative; */
        }

        .center .ShoppingCart h1 {
            font-size: 20px;
            margin-left: 10px;
            margin-top: 10px;
            /* position: absolute; */
            /* left: 10px;
            top: 10px; */
        }

        .center .ShoppingCart .summary {
            width: 100%;
            height: 50px;
            background-color: aqua;
            font-size: 30px;
            text-align: center;
        }

        .center .ShoppingCart .price {
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 100px;
            margin-bottom: 10px;

        }

        .center .ShoppingCart .price button {
            width: 30px;
            height: 30px;
            margin-top: 30px;
        }

        .center .ShoppingCart .price input {
            height: 50px;
            margin-top: 20px;
        }

        .center .ShoppingCart .price .pic2 {
            /* box-sizing: border-box; */
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }

        .center .ShoppingCart .price .pic2 img {
            height: 70px;
            width: 100%;
        }

        .center .ShoppingCart .price span {
            line-height: 100px;
        }
        .center .ShoppingCart .price .delete{
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="center">
            <div class="furniture">
                <!-- <img src="/img/1.jpeg" alt=""> -->
            </div>
            <div class="ShoppingCart">
                <h1 class="title">购物车(0)</h1>
                <div class="carcar">

                </div>
                <div class="summary">总价:</div>
            </div>
        </div>
    </div>
</body>

</html>
<script>

    // class Shopping{
    //     constructor(dom,list){
    //         this.dom = dom
    //         this.list = list
    //         this.str = ``
    //         this.btn = document.querySelector('.ShoppingCart')
    //         this.render()
    //     }
    //     //渲染商品
    //     render(){

    //         for(let i = 0 ; i<this.list.length ; i++){
    //         this.str += 
    //     }
    //     this.dom.innerHTML += this.str
    //     }
    //     //
    //     bindevent(){
    //         this.btn.onclick((e)=>{

    //         })
    //     }
    // }
    let list = [{ pic: './img/1.jpeg', id: '高级办公椅', money: '1000', count: 1 }, { pic: './img/2.jpeg', id: '高级按摩椅', money: '2000', count: 1 }, { pic: './img/3.jpeg', id: '高级沙发', money: '100', count: 1 }, { pic: './img/4.jpeg', id: '电动按摩椅', money: '10', count: 1 }, { pic: './img/5.jpeg', id: '老板椅', money: '300', count: 1 }, { pic: './img/6.jpeg', id: '办公桌', money: '200', count: 1 }, { pic: './img/7.jpeg', id: '升降办公桌', money: '400', count: 1 }, { 'pic': './img/8.jpeg', id: '高级办公桌', money: '3000', count: 1 }]
    let Shopcar = { list: [] }
    function render() {
        let furnitureEle = document.querySelector('.furniture')
        furnitureEle.innerHTML = list.map((item) => {
            return `
             <div class="furniture1">
             <img src="${item.pic}" alt="">
             <p>${item.id}</p>
             <p>${item.money}</p>
             <button>加入购物车</button>
             </div>
             `
        }).join('')
    }
    function renderShop() {
        // let gouwuche = document.querySelector('.ShoppingCart')
        let gouwuche = document.querySelector('.carcar')
        gouwuche.innerHTML = Shopcar.list.map((item) => {
            return `
            <div class="price">
                    <input type="checkbox">
                    <div class="pic2">
                        <img src="${item.pic}" alt="">
                        <p>${item.id}</p>
                    </div>
                    <span>${item.money}</span>
                    <button class = "jian">-</button>
                    <span class = "count">${item.count}</span>
                    <button class = "jia">+</button>
                    <span class = "delete">删除收藏</span>
            </div>
            `
        }).join('')
    }
    render()
    click()
    //添加点击事件
    function click() {
        let shop = document.querySelector('.furniture')
        // let shopCount = 1
        shop.onclick = (e) => {
            if (e.target.tagName == 'BUTTON') {
                //获取商品下标
                let btns = [...document.querySelectorAll('button')]
                // console.log(btns);
                let index = btns.findIndex((item) => {

                    return item == e.target

                })
                //添加商品数据到购物车数组
                Shopcar.list.push(list[index])
                renderShop()
                //渲染购物车
                
            }
            // else if( Shopcar.list.indexOf(list[index]) != -1 ){
            //     list.count++
            //     renderShop()
            // }
        }
    }
    //
    let gouwuche = document.querySelector('.carcar')
    //加号点击事件
    gouwuche.onclick = (e)=>{
        if( e.target.className == 'jia' ){
            let jiaBtns = [...document.querySelectorAll('.jia')]
            jiaBtns.forEach((item)=>{
                item.onclick = (e) =>{
                    let index = jiaBtns.findIndex((item)=>{
                        return item == e.target
                    })
                    Shopcar.list[index].count++
                    renderShop()
                }
            })
        }
        //减号点击事件
        if( e.target.className == 'jian' ){
            let jiaBtns = [...document.querySelectorAll('.jian')]
            jiaBtns.forEach((item)=>{
                item.onclick = (e) =>{
                    let index = jiaBtns.findIndex((item)=>{
                        return item == e.target
                    })
                    if(Shopcar.list[index].count>1){
                        Shopcar.list[index].count--
                    }
                    renderShop()
                }
            })
        }

        //删除收藏
        if( e.target.className == 'delete' ){
            let deleteS = [...document.querySelectorAll('.delete')]
            deleteS.forEach((item)=>{
                item.onclick = (e)=>{
                    let index = deleteS.findIndex((item)=>{
                        return item == e.target
                    })
                    Shopcar.list.splice(index , 1)
                    renderShop()
                }
            })
        }

        //渲染购物车和总价
        let count = 0
        Shopcar.list.forEach((item) => {
            count += item.count
        })
        document.querySelector('.title').innerHTML = `购物车(${count})`
        //渲染总价
        let summaryEle = document.querySelector('.summary')
        var price = Shopcar.list.reduce((prev, item) => {
            return prev + item.count * item.money
        }, 0)
        // console.log(price);
        summaryEle.innerHTML = `总价：￥${price}`


    }

    
    // let shop = new Shopping(furnitureEle,list)
    // let newshop = new Proxy(Shopcar,{
    //     set:(a,b,c)
    // })


</script>